<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Add an icon to the map</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body {margin: 0;padding: 0;}
        #map {position: absolute;top: 0;bottom: 0;width: 100%;}
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // https://account.mapbox.com
        mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tjeXBrN3JjMGM0ZzJ3cnl0OWJscHlxYSJ9.GsQMG6Tfi05l4BbRqegJeQ';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11'
        });

        map.on('load', function () {
            map.loadImage(
                'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',//添加的图片地址
                function (error, image) {
                    if (error) throw error;
                    map.addImage('cat', image);
                    map.addSource('point', {
                        'type': 'geojson',
                        'data':{
				              type: "FeatureCollection",
				              name: "一只小猫咪",
				              crs: {
				                type: "name",
				                properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" },
				              },
				              features: [
				                {
				                  type: "Feature",
				                  properties: {
				                    Name: "小花猫",//图标注释内容
				                    description: null,
				                    timestamp: null,
				                    begin: null,
				                    end: null,
				                    altitudeMode: null,
				                    tessellate: -1,
				                    extrude: 0,
				                    visibility: -1,
				                    drawOrder: null,
				                    icon: "cat",
				                  },
				                  geometry: {
				                    type: "Point",
				                    coordinates: [0,0]//此处设置图标的经纬度坐标,确定图标在地图上显示的位置
				                  },
				                },
				              ],
				            },
                    });
                    map.addLayer({
			            id: "points",
			            type: "symbol",
			            source: "point",
			            layout: {
			              "icon-image": ["get", "icon"],
			              "text-field": ["get", "Name"],//此属性对应图标注释,必须拥有
			              "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
			              "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
			              "text-anchor": "top",
			              "icon-size": 0.5,//图标的大小
			            },
			            paint: {
			              "text-halo-color": "rgb(255,255,255)",
			              "text-halo-width": 2,
			            },
			          });
                }
            );
        });
    </script>
</body>
</html>
